<template>
  <div class="content">
    <el-table
        :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize).filter(
          (data) =>
            !search ||
            data.elderlyPersonId.toLowerCase().includes(search.toLowerCase()) ||
            data.eventDate.toLowerCase().includes(search.toLowerCase()) ||
            data.eventType.toLowerCase().includes(search.toLowerCase())
        )
      "
        style="width: 100%; border-radius: 0.8rem"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form
              label-position="left"
              :inline="true"
              class="demo-table-expand"
          >
            <el-form-item label="事件类型">
              <span>{{ props.row.eventType }}</span>
            </el-form-item>
            <el-form-item label="发生日期">
              <span>{{ props.row.eventDate }}</span>
            </el-form-item>
            <el-form-item label="发生地点">
              <span>{{ props.row.eventLocation }}</span>
            </el-form-item>
            <el-form-item label="事件老人ID">
              <span>{{ props.row.elderlyPersonId }}</span>
            </el-form-item>
            <el-form-item label="事件描述">
              <span>{{ props.row.eventDesc }}</span>
            </el-form-item>
            <el-form-item label="事件图片">
              <img id="props.row.eventImage" :src="props.row.eventImage" width="120" height="120" @click="clickImg($event)"/>
              <el-tooltip class="item" effect="dark" content="须在夜间才可开启该模式" placement="top">
                <el-switch
                  v-model="value1"
                  active-text="开"
                  inactive-text="图像超分 关"
                  @change="changeImg"
                >
                </el-switch>
              </el-tooltip>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="事件类型" prop="eventType"> </el-table-column>
      <el-table-column label="发生日期" prop="eventDate"> </el-table-column>
      <el-table-column label="发生地点" prop="eventLocation"> </el-table-column>
      <el-table-column label="事件老人ID" prop="elderlyPersonId"> </el-table-column>
      <el-table-column>
        <template slot="header" slot-scope="{}">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template   slot-scope="props">
          <span>{{ props.row.eventDesc }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="10"
        layout="sizes, prev, pager, next"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
    <bigImg v-if="showImg"
             @clickBigImg="closeBigImg"
             :imgSrc="imgSrc"></bigImg>
  </div>
</template>

<script>
import moment from "moment";
import bigImg from "@/components/bigImg";
export default {
  components:{
    bigImg,
  },
  data() {
    return {
      imgSrc: "",
      showImg:false,
      value1: false,
      search: "",
      currentPage: 1,
      pageSize: 10,
      timer: null,
      tableData: [
        {
          eventType: "陌生人检测",
          eventDate: "2022-07-08",
          eventLocation: "102",
          eventDesc: "Stranger detected",
          elderlyPersonId: "12",
          eventImage: "https://img1.sycdn.imooc.com/5d5e713c0001d62e08910614.png",
        },
      ],
    };
  },
  created() {
    this.getUsersInfo();
  },
  methods: {
    clickImg (e) {
      if (e.currentTarget.src) {
        this.imgSrc = e.currentTarget.src;
        this.showImg = true;
      }
    },
    // 关闭事件
    closeBigImg () {
      this.imgSrc = "";
      this.showImg = false;
    },
    changeImg() {
      this.$message({
        message: "图像正在处理中"
      });
      this.timer = setTimeout(() => {
        //设置延迟执行
        this.$message({
          type: "success",
          message: "图像处理完成"
        });
        this.imgSrc = "https://zzay.oss-cn-shenzhen.aliyuncs.com/supervision/snapshot_invasion_20220714_232556.png";
        this.showImg = true;
        this.value1 = false;
      }, 5000);

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    getUsersInfo() {
      var that = this;
      this.$axios
        .get("http://zzay0132.mynatapp.cc/event/getAll")
          .then((response) => {
          that.response = response.data;
          this.tableData = response.data.data.info;
          for(var i = 0;i<this.tableData.length;i++) {
            if(this.tableData[i].eventType === 0) {
              this.tableData[i].eventType = "情感检测";
            } else if(this.tableData[i].eventType === 1) {
              this.tableData[i].eventType = "义工交互检测";
            } else if(this.tableData[i].eventType === 2) {
              this.tableData[i].eventType = "陌生人检测";
            } else if(this.tableData[i].eventType === 3) {
              this.tableData[i].eventType = "摔倒检测";
            } else if(this.tableData[i].eventType === 4) {
              this.tableData[i].eventType = "禁止区域入侵检测";
            }
            if(this.tableData[i].eventLocation === "Room") {
              this.tableData[i].eventLocation = "房间";
            } else if(this.tableData[i].eventLocation === "Corridor") {
              this.tableData[i].eventLocation = "走廊";
            } else if(this.tableData[i].eventLocation === "Yard") {
              this.tableData[i].eventLocation = "院子";
            } else if(this.tableData[i].eventLocation === "Desk in the room") {
              this.tableData[i].eventLocation = "屋内桌子";
            }
            if(this.tableData[i].eventDesc === "Stranger detected") {
              this.tableData[i].eventDesc = "检测到陌生人";
            } else if(this.tableData[i].eventDesc === "Region invasion") {
              this.tableData[i].eventDesc = "检测到区域入侵";
            } else if(this.tableData[i].eventDesc === "Elderly person interacting with the volunteer") {
              this.tableData[i].eventDesc = "老人和志愿者交互";
            } else if(this.tableData[i].eventDesc === "Fall action detected...") {
              this.tableData[i].eventDesc = "检测到摔倒行为";
            }
            if(this.tableData[i].elderlyPersonId === -1) {
              this.tableData[i].elderlyPersonId = "此事件与老人无关";
            }
            this.tableData[i].eventDate = moment(this.tableData[i].eventDate).format("YYYY-MM-DD HH:mm:ss");
          }
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>
